<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns#">
    <meta charset="UTF-8">
    <title>Coolface</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">

    <meta property="og:type" content="website">
    <meta property="og:title" content="coolface">
    <link rel="stylesheet" href="./css/style_3d.css">
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';  /* project id 324639 */
            src: url('//at.alicdn.com/t/font_324639_4impjau9o2edn29.eot');
            src: url('//at.alicdn.com/t/font_324639_4impjau9o2edn29.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_324639_4impjau9o2edn29.woff') format('woff'),
            url('//at.alicdn.com/t/font_324639_4impjau9o2edn29.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_324639_4impjau9o2edn29.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:"iconfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;}
    </style>
</head>
<body>
<!-- Music -->

<audio id="music" src="" controls="controls" loop preload="auto" style="position: absolute;z-index: 100;display: none;">
    <!--<source src="http://youdoneed-test.oss-cn-shenzhen.aliyuncs.com/164xjoropo7ugnqy4ak1.mp3" >-->
    Your browser does not support the audio element.
</audio>
<!-- Music -->
<div id="sway">

    <canvas id="swayCanvas">
        Your browser does not support Canvas！
    </canvas>

</div>

<!--Guide-->
<div id="guideContainer">
    <div style="width: 290px; height: 110px; border-radius: 2px; display: flex; justify-content: center;align-items: center;" class="linear-gradient">
        <img id="loadingPhone"/>
        <span id="loadingTip"></span>
    </div>
</div>
<!--Guide-->

<!-- Topic -->
<!-- <div id="topic" class="linear-gradient-shade">

    <div class="user-info-panel">
        <span class="show-id">@yjl2010</span>
    </div>

    <div style="width: 101px; height: 55px; float: right">
        <img class="watermark" src="/lib/images/landing_v2/watermark.png" alt="">
    </div>
</div> -->
<!-- Topic -->

<!-- Cover -->
<div id="loadingContainer">
    <!-- <img id="loadingFrame" src="
        https://s3.amazonaws.com/overseas-sway-img-release/FmaDLIFOnCs0mOH7ScfziF-QJktd.mp4-1.jpg    "/>
    <div id="loadingDiv" class="linear-gradient">
        <span id="loadingTip"></span>
        <div style="margin-top: 232px;">
            <img style="width: 121px; height: 20px;" src="/lib/images/landing_v2/loading_logo.png">
        </div>
        <span class="loading-show-id">@yjl2010</span>
    </div> -->
</div>
<!-- Cover -->

<!-- SliderHorizontal -->
<div id="sliderHorizontalContainer">
    <div id="downloadProcessHorizontal"></div>
    <div id="sliderHorizontal" style="left: 0;"></div>
</div>
<!-- SliderHorizontal -->

<!-- SliderVertical -->
<div id="sliderVerticalContainer">
    <div id="downloadProcessVertical"></div>
    <div id="sliderVertical" style="bottom: 0; "></div>
</div>
<!-- SliderVertical -->

<!-- Loop -->
<!--<div class="loop-container">-->
    <!--<img id="loopImg" style="width: 22px; height: 34px;" src="">-->
    <!--<span id="loop">423</span>-->
<!--</div>-->
<!-- Loop -->

<!-- Download -->
<div id="download">
    <div style="width: 100%; height: 246px;">
        <div style="display: flex; justify-content: center; margin-bottom: 30px;">
            <!--<img style="width: 179px; height: 166px;" src="/lib/images/landing_v2/logo.png">-->
        </div>

        <!--<div style="display: flex; justify-content: center;">-->
            <!--<div id="downloadButton" class="linear-gradient">-->
            <!--<span id='platform_icon'>-->
                <!--&lt;!&ndash; <img style="width: 18px; height: 22px;" src="/lib/images/landing_v2/download_ios.png"> &ndash;&gt;-->
            <!--</span>-->
                <!--<span class="download-text">下载coolface</span>-->
            <!--</div>-->
        <!--</div>-->

    </div>
</div>

<div style="display: flex; justify-content: center; position: fixed;top: 10px;right: 10px;z-index: 100;opacity: 0.5;">
    <div id="downloadButton" class="download linear-gradient">
            <span id='platform_icon'>
                <!-- <img style="width: 18px; height: 22px;" src="/lib/images/landing_v2/download_ios.png"> -->
            </span>
        <span class="download-text">下载coolface</span>
    </div>
</div>
<!-- Download -->
<div style="overflow:hidden;">
    <div id="userInfo">
        <p>
            <img id="userImg" class="download" src="" alt="">
            <span class="download" id="userName"></span>
        </p>
        <p id="content" class="download" ></p>
        <p id="musicName" class="download" ></p>
        <!--<ul>-->
            <!--<li id="zan" class="download" ></li>-->
            <!--<li id="message" class="download" ></li>-->
            <!--<li id="share" class="download" ></li>-->
        <!--</ul>-->
    </div>
</div>

<div id="initCover" class="linear-gradient"></div>

<div id='last-div'></div>

<script type="text/javascript">

     document.addEventListener("touchmove",function(e){
         e.preventDefault();
         e.stopPropagation();
     },false);

    // var cdnDomain = 'https://s3.amazonaws.com/overseas-sway-img-release/';
    // var imageNum = 67;
    // var imagePrefix = 'FmaDLIFOnCs0mOH7ScfziF-QJktd.mp4';
    // var directionX = 1;
    // var directionY = 0;
    // var initLoop = 423;
    // var user_id = '13526229348c327e2e9b2723727a022a';

    var cdnDomain = 'http://youdoneed-test.oss-cn-shenzhen.aliyuncs.com/';
    var imageNum = GetQueryString('length');
    var imagePrefix = GetQueryString('id');
    var directionX = 1;
    var directionY = 0;
    var initLoop = 423;
//    var user_id = '13526229348c327e2e9b2723727a022a';

    document.getElementById("swayCanvas").style.backgroundImage = "url('http://youdoneed-test.oss-cn-shenzhen.aliyuncs.com/"+ GetQueryString('id') +"-1.jpg')";
    document.getElementById("swayCanvas").style.backgroundSize = 'cover';
//    var audio = document.getElementById("music");
//     audio.src = GetQueryString('musicUrl');
//     alert(audio.src)
//     audio.play();

     //--创建页面监听，等待微信端页面加载完毕 触发音频播放
     document.addEventListener('DOMContentLoaded', function () {
         function audioAutoPlay() {
             var audio = document.getElementById('music');
             audio.src = GetQueryString('musicUrl');
             audio.play();
             document.addEventListener("WeixinJSBridgeReady", function () {
                 audio.play();
             }, false);
         }
         audioAutoPlay();
     });
     //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
     var isPlaying = true;
     document.addEventListener('touchstart', function () {
         function audioAutoPlay() {
             var audio = document.getElementById('music');
             audio.src = GetQueryString('musicUrl');
             audio.play();
         };
         if(isPlaying) {
             audioAutoPlay();
         }
         isPlaying = false;
     });

     function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

     function ajax(){
         var ajaxData = {
             type:arguments[0].type || "GET",
             url:arguments[0].url || "",
             async:arguments[0].async || "true",
             data:arguments[0].data || null,
             dataType:arguments[0].dataType || "text",
             contentType:arguments[0].contentType || "application/x-www-form-urlencoded",
             beforeSend:arguments[0].beforeSend || function(){},
             success:arguments[0].success || function(){},
             error:arguments[0].error || function(){}
         }
         ajaxData.beforeSend()
         var xhr = createxmlHttpRequest();
         xhr.responseType=ajaxData.dataType;
         xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
         xhr.setRequestHeader("Content-Type",ajaxData.contentType);
         xhr.send(convertData(ajaxData.data));
         xhr.onreadystatechange = function() {
             if (xhr.readyState == 4) {
                 if(xhr.status == 200){
                     ajaxData.success(xhr.response)
                 }else{
                     ajaxData.error()
                 }
             }
         }
     }

     function createxmlHttpRequest() {
         if (window.ActiveXObject) {
             return new ActiveXObject("Microsoft.XMLHTTP");
         } else if (window.XMLHttpRequest) {
             return new XMLHttpRequest();
         }
     }

     function convertData(data){
         if( typeof data === 'object' ){
             var convertResult = "" ;
             for(var c in data){
                 convertResult+= c + "=" + data[c] + "&";
             }
             convertResult=convertResult.substring(0,convertResult.length-1)
             return convertResult;
         }else{
             return data;
         }
     };
     ajax({
         type:"GET",
         url:"../community/forummessage/getForumMsgDetail?forumMsgId="+ GetQueryString('id'),
         beforeSend:function(){
             //some js code
         },
         success:function(resp){
             var data = JSON.parse(resp);
             console.log(data)
             if(data.success) {
                 document.getElementById('userImg').src = data.data.userHeadUrl;
                 document.getElementById('userName').innerText = data.data.nickName;
                 document.getElementById('content').innerText = data.data.msgContent;
                 document.getElementById('musicName').innerHTML = "<i class='iconfont'>&#xe7f8;</i>  " + data.data.listForummediaresource[0].songName + '-' + data.data.listForummediaresource[0].singerName;
                 document.getElementById('zan').innerHTML = "<i class='iconfont'>&#xe601;</i>  " + (parseInt(data.data.likesCount) > 0 ? data.data.likesCount : '赞');
                 document.getElementById('message').innerHTML = "<i class='iconfont'>&#xe648;</i>  " + (parseInt(data.data.commentCount) > 0 ? data.data.commentCount : '评论');
                 document.getElementById('share').innerHTML = "<i class='iconfont'>&#xe673;</i>  " + (parseInt(data.data.shareCount) > 0 ? data.data.shareCount : '分享');
             }
         },
         error:function(){
             console.log("error")
         }
     })

</script>
<script src="./js/landing.js"></script>
</body>
</html>